<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sprite</title>
  </head>

  <body>
    <canvas width="750" height="1000" id="canvas" style="width: 100%"></canvas>
    <script src="https://cdn.bootcdn.net/ajax/libs/pixi.js/4.8.7/pixi.min.js"></script>

    <script src="/dist/cdn/EVA.js"></script>
    <script src="/dist/cdn/EVA.rendererAdapter.js"></script>
    <script src="/dist/cdn/EVA.plugin.renderer.js"></script>
    <script src="/dist/cdn/EVA.plugin.renderer.sprite.js"></script>
    <script>
      const {Game, GameObject, resource, RESOURCE_TYPE} = EVA;
      const {RendererSystem} = EVA.plugin.renderer;
      const {Sprite, SpriteSystem} = EVA.plugin.renderer.sprite;

      resource.addResource([
        {
          name: 'spriteName',
          type: RESOURCE_TYPE.SPRITE,
          src: {
            image: {
              type: 'png',
              url: 'https://g.alicdn.com/eva-assets/eva-assets-examples/0.0.2/sprite/TB1ONLxOAL0gK0jSZFAXXcA9pXa-900-730.png',
            },
            json: {
              type: 'json',
              url: 'https://g.alicdn.com/eva-assets/eva-assets-examples/0.0.2/sprite/ad317f6aea149d9a8b34a517e5df2caf.json',
            },
          },
          preload: true,
        },
      ]);

      const game = new Game({
        systems: [
          new RendererSystem({
            canvas: document.querySelector('#canvas'),
            width: 750,
            height: 1000,
            backgroundColor: 0x101010,
          }),
          new SpriteSystem(),
        ],
      });

      const gameObj1 = new GameObject('symbol_1', {
        size: {width: 200, height: 244},
        position: {
          x: 0,
          y: 0,
        },
      });

      const spriteCom1 = new Sprite({
        resource: 'spriteName',
        spriteName: 'symbol_1',
      });

      gameObj1.addComponent(spriteCom1);

      const gameObj2 = new GameObject('symbol_2', {
        size: {width: 200, height: 244},
        position: {
          x: 300,
          y: 0,
        },
      });

      const spriteCom2 = new Sprite({
        resource: 'spriteName',
        spriteName: 'symbol_2',
      });

      gameObj2.addComponent(spriteCom2);

      const gameObj3 = new GameObject('symbol_3', {
        size: {width: 200, height: 244},
        position: {
          x: 600,
          y: 0,
        },
      });

      const spriteCom3 = new Sprite({
        resource: 'spriteName',
        spriteName: 'symbol_3',
      });

      gameObj3.addComponent(spriteCom3);

      const gameObj4 = new GameObject('symbol_4', {
        size: {width: 200, height: 244},
        position: {
          x: 0,
          y: 365,
        },
      });

      const spriteCom4 = new Sprite({
        resource: 'spriteName',
        spriteName: 'symbol_4',
      });

      gameObj4.addComponent(spriteCom4);

      const gameObj5 = new GameObject('symbol_5', {
        size: {width: 200, height: 244},
        position: {
          x: 300,
          y: 365,
        },
      });

      const spriteCom5 = new Sprite({
        resource: 'spriteName',
        spriteName: 'symbol_5',
      });

      gameObj5.addComponent(spriteCom5);

      game.scene.addChild(gameObj1);
      game.scene.addChild(gameObj2);
      game.scene.addChild(gameObj3);
      game.scene.addChild(gameObj4);
      game.scene.addChild(gameObj5);
    </script>
  </body>
</html>
